<template>
    <div class="headerbox">
        <div class="header">
            <!-- 导航 -->
            <van-nav-bar
                :title="productdetail.name"
                left-text
                left-arrow
                @click-left="back"
                @click-right="ShowShare = true"
            >
                <template #right>
                    <van-icon name="ellipsis" color="#1989fa" />
                </template>
            </van-nav-bar>
            <!-- 分享面板 -->
            <van-share-sheet
                v-model:show="ShowShare"
                title="立即分享给好友"
                :options="options"
                @select="onSelect"
            />
        </div>
    </div>
    <div class="clear"></div>
    <div class="h50"></div>
    <div class="clear"></div>
    <!-- 轮播 -->
    <div class="aui-m-slider">
        <div class="m-slider" data-ydui-slider>
            <van-swipe class="my-swipe" :autoplay="2000">
                <van-swipe-item v-for="(item, index) in productdetail.thumbs_cdn" :key="index">
                    <img :src="item" />
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
    <div class="clear"></div>
    <div class="detailbox">
        <h4>{{ productdetail.name }}</h4>
        <!-- 判断是否有产品VIP的价格 -->
        <div class="price" v-if="productdetail.level">
            <em>￥</em>
            {{ productdetail.level }}
            <span>￥{{ productdetail.price }}</span>
            <div class="stock">库存：{{ productdetail.stock }}件</div>
        </div>
        <div class="price" v-else>
            <em>￥</em>
            {{ productdetail.price }}
            <div class="stock">库存：{{ productdetail.stock }}件</div>
        </div>
    </div>
    <div class="clear"></div>
    <div class="allkbox"></div>
    <div class="clear"></div>
    <div class="detailbox_2">
        <p class="tit">产品参数：</p>
        <div v-html="productdetail.content"></div>
    </div>
    <div class="clear"></div>
    <div class="h54"></div>
    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" @click="contact"/>
        <van-action-bar-icon icon="cart-o" text="购物车" @click="toPageCart"/>
        <van-action-bar-button type="warning" text="加入购物车" @click="AddCart"/>
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
</template>
<script>
    export default {
        emits: ['toggle'],
        // 传值给到父组件
        created() {
            this.$emit('toggle', false)
            // 接收路由的传值
            this.proid = this.$route.query.proid
            this.LoginUser = this.$cookies.get('LoginUser')
            this.productInfo();
        },
        data() {
            return {
                proid: null,
                ShowShare: false,
                options: [
                    [
                        { name: '微信', icon: 'wechat' },
                        { name: '朋友圈', icon: 'wechat-moments' },
                        { name: '微博', icon: 'weibo' },
                        { name: 'QQ', icon: 'qq' },
                    ],
                    [
                        { name: '复制链接', icon: 'link' },
                        { name: '分享海报', icon: 'poster' },
                        { name: '二维码', icon: 'qrcode' },
                        { name: '小程序码', icon: 'weapp-qrcode' },
                    ],
                ],
                LoginUser: {},
                productdetail: {}
            }
        },
        methods: {
            back() {
                this.$router.go(-1);
            },
            // 产品详情
            async productInfo() {
                let params = {
                    proid: this.proid,
                    userid: this.LoginUser.id
                }
                let  result = await this.$api.productInfo(params)
                if (result.code == '1') {
                    this.productdetail = result.data
                } else {
                    this.$notify({
                        type: 'danger',
                        message: result.msg,
                        duration: 1000
                    })
                }
            },
            onSelect() {
                this.ShowShare = false;
            },
            contact(){
                this.$dialog.confirm({
                    'title':'拨打电话',
                    'message': '是否确认拨打官方客服热线'
                })
                .then(() => {
                    location.href = `tel:13512633441`
            return
                })
            },
            toPageCart(){
                this.$router.push('/product/cart/index')
            },
            // 加入购物车
            async AddCart(){

                if (!this.LoginUser || JSON.stringify(this.LoginUser) == "{}"){
                    //提醒信息
                    this.$notify({
                        type:'danger',
                        message:'请先登录',
                        duration:1000,
                        onClose: () => {
                        this.$router.push('/user/base/login')
                        return false
                        }
                    })
                    return false
                }

                let params = {
                    proid: this.proid,
                    userid: this.LoginUser.id
                }

                let result = await this.$api.AddCart(params)

                if(result.code == '1'){
                    this.$dialog.confirm({
                        message:result.msg,
                    }).then(async () => {
                        this.$router.push(result.url)
                    })
                } else{
                    this.$notify({
                        message:result.msg,
                        duration:1000,
                    })
                    return false
                }
            }
        }
    }
</script>